<template>
  <div class="container">
  	<h1 class="title">岳西县保安登记系统</h1>
  	<form>
      <div class="input-group">
      	<span class="label">姓名：</span>
      	<input type="text" name="name" v-model="IDinfo.name" disabled>
      </div>

      <div class="input-group">
      	<span class="label">性别：</span>
      	<input type="text" name="sex" v-model="IDinfo.sex" disabled>
      </div>

      <div class="input-group">
        <span class="label">民族：</span>
        <input type="text" name="sex" v-model="IDinfo.nation" disabled>
      </div>

      <div class="input-group">
      	<span class="label">身份证：</span>
      	<input type="text" name="id_card" v-model="IDinfo.id_card" disabled>
      </div>

      <div class="input-group">
      	<span class="label">手机号：</span>
      	<input type="text" name="phone" v-model="phone">
      </div>

      <div class="input-group">
      	<span class="label">地址：</span>
      	<input type="text" name="addr" v-model="IDinfo.addr" disabled>
      </div>

      <div class="input-group">
      	<span class="label">年龄：</span>
      	<input type="text" name="age" v-model="IDinfo.age" disabled>
      </div>

      <div class="input-group">
      	<span class="label">推荐人：</span>
      	<input type="text" name="to_name" v-model="to_name">
      </div>

      <div class="input-group">
      	<span class="label">工作经历：</span>
      	<textarea name="work_experience" rows="5" v-model="work_experience"></textarea> 
      </div>
       
  	</form>

    <div><button class="submit" @click="onSubmit">提交资料</button></div>

    <dialog-bar v-model="sendVal" type="confirm" title="提示信息" :content="content"  @confirm="clickConfirm()"></dialog-bar>

  </div>
</template>

<script>
  import dialogBar from '../components/dialog.vue'
  export default {
    components:{
        'dialog-bar': dialogBar
    },
    name:"index",
    data(){
      return {
        sendVal: false, // 是否显示弹窗
        content: '',
        IDinfo: {
          name:'张三',
          sex:'男',
          nation:'汉',
          id_card:'340828199009050119',
          addr:'安徽省岳西县天堂镇',
          age: 19
        },
        phone:'',
        to_name:'',
        work_experience:''
      }
    },

    created() {
      
    },

    methods: {
        clickConfirm(){
            console.log('点击了confirm');
            if(this.content == '资料提交成功！') {
              this.$router.push('/welcome')
            }
        },
   
      onSubmit() {
        let that = this;
        let params = {};

      console.log('前',that.IDinfo)
        // 循环身份证信息，判断是否为空
        for(let key in that.IDinfo){
          params[key] = that.IDinfo[key];
          console.log(that.IDinfo[key])
          if(that.IDinfo[key] =='') {
            that.sendVal = true;
            that.content = '带*的选项不能为空';
            return;
          }
        }

        if( !(/^1[3456789]\d{9}$/.test(that.phone)) ){ 
          that.sendVal = true; 
          that.content = '手机号有误，请重填';
          return; 
        } 

        params['phone'] = that.phone;
        params['to_name'] = that.to_name;
        params['work_experience'] = that.work_experience;

        console.log('params',params)
        
        console.log('后IDinfo',that.IDinfo)
        

        // 提交资料
        this.$api.post('/index/index/visitor', params , r => {
        console.log('提交结果',r)
          if(r.code == 1){
            that.sendVal = true; 
            that.content = '资料提交成功！';
            
          }
      })

      }

    }
  }
</script>

<style scoped>
  .container{
    width: 530px;
    margin: 0 auto;
  }
  .title{
    margin-bottom: 80px;
    color: #fff;
  }
  .input-group{
    width: 530px;
    margin-bottom: 30px;
    line-height: 42px;
    margin-left: -54px;
  }
  .input-group .label{
    float: left;
    width: 90px;
    height: 42px;
    font-size: 18px;
    margin-right: 26px;
    text-align: right;
    color: #fff;
  }
  .input-group input {
    width: 400px;
    height: 38px;
    line-height: 42px;
    padding-left: 10px;
    font-size: 18px;
    outline: 0;
    border: 1px solid #12629d;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #266c9e;
  }
  .input-group input:disabled {
    background: #fff;
  }
  textarea{
    width: 394px;
    padding: 7px;
    border: 1px solid #12629d;
    border-radius: 3px;
    box-shadow: 1px 3px 5px #266c9e;
    outline: 0;
  }
 
</style>